<!--
  作者：xhr
  时间：2022年09月03日 23:05:19
-->

<template>
    <div style="padding: 10px">
        <div style="margin: 10px 0">
            <el-button style="margin-right: 10px;" type="primary" @click="add">新增</el-button>
            <el-popconfirm style="margin-right: 10px;" class="ml-5" confirm-button-text='好的' cancel-button-text='不用了'
                icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="delBath">
                <el-button plain class="el-icon-circle-close" type="danger" slot="reference">批量删除</el-button>
            </el-popconfirm>
            <el-input v-model="search" placeholder="搜索试卷名" style="width: 20%" clearable @clear="reply"></el-input>
            <el-button type="primary" style="margin: 0 10px 0 5px" @click="loading">查询</el-button>
            <el-select v-model="value" filterable clearable @clear="reply" placeholder="课程筛选"
                :filter-method="selectCourse(value)">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <el-table :data="tableData" border stripe>
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column sortable prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <!-- <el-table-column prop="score" label="总分"></el-table-column> -->

            <el-table-column label="所属课程">
                <template slot-scope="scope">
                    <span>{{ courses.find(v => v.id === scope.row.courseId)?courses.find(v => v.id === scope.row.courseId).name:'' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="查看题目">
                <template slot-scope="scope">
                    <el-button @click="viewPaper(scope.row.id)" size="mini">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="350">
                <template slot-scope="scope">
                    <el-button @click="preHandPaper(scope.row.id, scope.row.courseId)" size="mini">手动组卷</el-button>
                    <el-button @click="preAutoPaper(scope.row.id, scope.row.courseId)" size="mini">自动组卷</el-button>

                    <el-button @click="update(scope.row)" size="mini">编辑</el-button>
                    <el-popconfirm title="确定删除吗？" style="margin-left: 5px" @confirm="delate(scope.row.id)">
                        <el-button type="danger" size="mini" slot="reference">删除
                        </el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[5, 10, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog title="信息" :visible.sync="dialogVisible" width="30%">
            <el-form label-width="120px" :model="form">
                <el-form-item label="名称">
                    <el-input v-model="form.name" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="总分">
                    <el-input v-model="form.score" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="课程">
                    <el-select v-model="form.courseId" placeholder="请选择" clearable style="width: 80%">
                        <el-option v-for="item in courses" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="自动组卷" :visible.sync="dialogVisible2" width="30%">
            <el-form label-width="120px" :model="form">
                <el-form-item label="选择题">
                    <el-input v-model="form1.type1" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="判断题">
                    <el-input v-model="form1.type2" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="简答题">
                    <el-input v-model="form1.type3" style="width: 80%"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="autoPaper">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="手动组卷" :visible.sync="dialogVisible4" width="55%">

            <el-transfer style="margin: 20px auto;width: 565px;  " :titles="['题库', '已选择']" filter-placeholder="1是选择2是判断3是简答"
                filterable :filter-method="filterMethod" v-model="form2.handQuestionIds" :data="paperQuestions"
                :props="{ key: 'id', label: 'name' }"></el-transfer>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible4 = false">取 消</el-button>
                <el-button type="primary" @click="handPaper">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="已组卷" :visible.sync="dialogVisible3" width="60%">
            <el-card>
                <div v-for="(item, index) in questions" :key="item.id" style=" margin: 10px ; ">
                    <div style="font-size:24px">{{ index + 1 }}.{{ item.name }}
                        <span v-if="item.type == 1" style="font-size:20px">(选择题)</span>
                        <span v-if="item.type == 2" style="font-size:20px">(判断题)</span>
                        <span v-if="item.type == 3" style="font-size:20px">(简答题)</span>
                    </div>
                    <div v-if="item.type == 1" style=" margin: 10px ; ">
                        <span style="margin-right: 10px ;">A.{{ item.a }}</span>
                        <span style="margin-right: 10px ;">B.{{ item.b }}</span>
                        <span style="margin-right: 10px ;">C.{{ item.c }}</span>
                        <span style="margin-right: 10px ;">D.{{ item.d }}</span>
                    </div>
                    <div style=" margin: 10px ;">
                        答案：{{ item.answear }}
                    </div>
                    <div style=" margin: 10px ;">
                        解析：{{ item.detail }}
                    </div>
                </div>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
import request from "@/utils/request";



export default {
    name: "paper",
    data() {
        return {
            type: null,
            form1: {},
            dialogVisible2: false,
            vis: false,
            form: {},
            form2: {},
            total: 0,
            currentPage: 1,
            pageSize: 10,
            search: "",
            dialogVisible: false,
            dialogVisible3: false,
            dialogVisible4: false,
            tableData: [],
            questions: [],
            paperQuestions: [],
            courses: [],
            options: [],
            value: '',
            courseId: null,
        };
    },
    created() {
        request.get("/course").then((res) => {

            this.courses = res.data;
            this.courses.forEach(e => {
                var obj = {};
                obj.value = e.id;
                obj.label = e.name;
                this.options.push(obj);
            });
        });
        this.loading();
    },
    mounted() { },
    methods: {

        loading() {
            request
                .get("/paper/page", {
                    params: {
                        pagenum: this.currentPage,
                        pagesize: this.pageSize,
                        search: this.search,
                        courseId: this.courseId,
                    },
                })
                .then((res) => {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                });
        },
        handPaper() {
            request.post("/paper/handPaper", this.form2).then(res => {
                if (res.code === "0") {
                    this.$message({
                        type: "success",
                        message: "组卷成功",
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "组卷失败",
                    });
                }
                this.dialogVisible4 = false;

            });
        },
        filterMethod(query, item) {
            return !query || item.type == query;
        },
        viewPaper(paperId) {
            request.get("/paper/view/" + paperId).then(res => {
                this.questions = res.data
                this.dialogVisible3 = true
            });
        },
        preHandPaper(paperId, courseId) {
            request.get("/question").then(res => {
                this.paperQuestions = res.data.filter(v => v.courseId == courseId)
                // console.log(this.paperQuestions)
            })
            this.form2 = { handQuestionIds: [], paperId: paperId }
            this.dialogVisible4 = true
        },
        autoPaper() {
            request.post("/paper/autoPaper", this.form1).then(res => {
                if (res.code === "0") {
                    this.$message({
                        type: "success",
                        message: "组卷成功",
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: res.msg,
                    });
                }
                this.dialogVisible2 = false;
            })
        },
        preAutoPaper(paperId, courseId) {
            this.form1 = { type1: 3, type2: 3, type3: 3, paperId: paperId, courseId: courseId }
            this.dialogVisible2 = true;
        },
        save() {
            if (this.form.id) {
                request.put("/paper", this.form).then((res) => {
                    console.log(res);
                    if (res.code === "0") {
                        this.$message({
                            type: "success",
                            message: "更新成功",
                        });
                    } else {
                        this.$message({
                            type: "error",
                            message: "更新失败",
                        });
                    }
                    this.loading();
                    this.dialogVisible = false;

                });
            } else {
                request.post("/paper", this.form).then((res) => {
                    console.log(res);
                    if (res.code === "0") {
                        this.$message({
                            type: "success",
                            message: "新增成功",
                        });
                    } else {
                        this.$message({
                            type: "error",
                            message: "新增失败",
                        });
                    }
                    this.loading();
                    this.dialogVisible = false;

                });
            }
        },
        add() {
            this.dialogVisible = true;
            this.form = {};


        },
        update(row) {
            this.form = JSON.parse(JSON.stringify(row));
            this.dialogVisible = true;


        },
        delate(id) {
            request.delete("/paper/" + id).then((res) => {
                if (res.code === "0") {
                    this.$message({
                        type: "success",
                        message: "删除成功",
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败",
                    });
                }
            });
            this.loading();
        },

        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.loading();
        },
        handleCurrentChange(pageNum) {
            this.currentPage = pageNum;
            this.loading();
        },
        // reply() {
        //     this.loading();
        // },
        selectCourse(st) {
            if (st != "") {
                this.courseId = st;
                this.loading();
            }
        },
        reply() {
            this.courseId = null;
            this.loading();
        },
        delBath() {
            // if (!this.ids.length) {
            //   this.$message.warning("请选择数据！")
            //   return
            // }
            // request.delete("/activity/delBatch/" + this.ids).then(res => {
            //   this.$message.success("批量删除成功！");
            //   this.loading()
            // })
        },

    },

};
</script>

<style></style>
